<template>
  <div>
    <div class="header">
      <span class="title" @click="mainpage">学术成果交流平台</span>
      <span v-if="this.$store.state.isLogin === false" class="button_group"
        ><el-button @click="login" class="btn">登录</el-button
        ><el-button @click="login" class="btn">注册</el-button></span
      ><span v-if="this.$store.state.isLogin === true" class="item">
        <span @click="mainpage" class="menu">主页</span
        ><span @click="search" class="menu">检索文献</span
        ><span @click="personal" class="menu">个人中心</span
        ><span @click="collect" class="menu">我的收藏</span>
      </span>
      <span v-if="this.$store.state.isLogin === true" class="usr"
        ><el-avatar :src="user_avatar" class="ava"></el-avatar
        ><span class="name"
          ><el-dropdown @command="handleCommand">
            <span class="el-dropdown-link dropdown"
              >{{ user_name }}<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="collect">我的收藏</el-dropdown-item>
              <el-dropdown-item command="history">浏览记录</el-dropdown-item>
              <!-- <el-dropdown-item command="verify">验证邮箱</el-dropdown-item> -->
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></span
        ></span
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_avatar: "",
      user_name: "abc123",
    };
  },
  methods: {
    login() {
      this.$router.push("/Login");
    },
    mainpage() {
      this.$router.push("/Mainpage");
    },
    logout() {
      var session_id = window.sessionStorage.getItem("session_id");
      var user_id = window.sessionStorage.getItem("user_id");
      this.$http
        .post("/user/logout", {
          session_id: session_id,
          user_id: user_id,
        })
        .then((res) => {
          if (res.data.success === "true") {
            this.$message.success(res.data.message);
            this.$store.commit("logout"); //store清除登录状态
            this.$router.push("/Mainpage");
          }
        })
        .catch((err) => {
          this.$message.error("网络错误,请稍后再试!");
        });
    },
    collect() {
      alert("collect");
    },
    history() {
      alert("history");
    },
    search() {
      this.$router.push("/Search");
    },
    personal() {
      alert("personal");
    },
    handleCommand(command) {
      if (command === "logout") this.logout();
      if (command === "collect") this.collect();
      if (command === "history") this.history();
    },
  },
  created() {
    this.user_avatar = window.sessionStorage.getItem("user_avatar");
    // this.user_name = window.sessionStorage.getItem("user_name");
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: rgba(247, 247, 247, 0.8);
  height: 60px;
  line-height: 60px;
  position: sticky;
  top: 0;
  z-index: 10;
  // vertical-align: center;
}
.title {
  font-family: "Microsoft YaHei";
  color: #417dc9;
  font-size: 30px;
  font-weight: 600;
  display: inline-block;
  height: 100%;
  margin-left: 25px;
  line-height: 60px;
  user-select: none;
  cursor: pointer;
}
.menu {
  font-size: 16px;
  font-weight: 500;
  color: #417dc9;
  padding: 0 16px;
  display: inline-block;
  height: 100%;
  user-select: none;
  cursor: pointer;
}
.menu:hover {
  color: #ff6c00;
  background-color: rgba(230, 230, 230, 0.6);
}
.item {
  position: absolute;
  right: 200px;
}
.button_group {
  position: absolute;
  right: 25px;
  margin-right: 30px;
}
.btn {
  border-radius: 15px;
  margin: 0px 7px;
}
.usr {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  position: absolute;
  right: 55px;
}
.ava {
  position: absolute;
  top: 10px;
}
.name {
  font-size: 17px;
  color: #666666;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-left: 50px;
  user-select: none;
}
.dropdown:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
